<template>
  <div>
    <!-- 面包屑导航区 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>图书管理</el-breadcrumb-item>
      <el-breadcrumb-item>图书列表</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 卡片视图 -->
    <el-card>
      <el-table :data="books" border stripe style="width: 100%">
        <el-table-column prop="id" label="编号"></el-table-column>
        <el-table-column prop="name" label="图书名"></el-table-column>
        <el-table-column prop="author" label="作者"></el-table-column>
        <el-table-column fixed="right" label="操作">
          <template slot-scope="scope">
            <el-button
              @click="handleEdit(scope.row.id)"
              type="primary"
              icon="el-icon-edit"
              circle
              size="small"
            ></el-button>
            <el-button
              @click="handleDelete(scope.row)"
              type="danger"
              icon="el-icon-delete"
              circle
              size="small"
            ></el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[2, 5, 10, 15]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      ></el-pagination>
    </el-card>
    <el-dialog title="图书编辑" :visible.sync="EditDialogVisible" width="40%">
      <el-form :model="editForm" :rules="editRules" ref="editFormRef" label-position="right">
         <el-form-item label="图书编号" prop="id">
          <el-input v-model="editForm.id" disabled></el-input>
        </el-form-item>
        <el-form-item label="图书名称" prop="name">
          <el-input v-model="editForm.name"></el-input>
        </el-form-item>
        <el-form-item label="作者" prop="author">
          <el-input  v-model="editForm.author"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="EditDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="commitEdit()">修 改</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'Book',
  data () {
    return {
      books: [
        {
          id: 1,
          name: 'java',
          author: 'Tom'
        }
      ],
      total: 20,
      currentPage: 0,
      pageSize: 5,
      EditDialogVisible: false,
      editForm: {},
      editRules: {
        name: [
          { required: true, message: '请输入图书名称', trigger: 'blur' }
        ],
        author: [
          { required: true, message: '请输入作者姓名', trigger: 'blur' }
        ]
      }
    }
  },
  created () {
    this.getAllBookList()
  },
  methods: {
    async getAllBookList () {
      const { data: res } = await this.$http.get(
        `http://localhost:8181/book/findAll/${this.currentPage}/${this.pageSize}`
      )
      this.books = res.content
      this.total = res.totalElements
      this.pageSize = res.size
      this.currentPage = res.number
      console.log(res)
    },
    // 分页
    handleSizeChange (val) {
      console.log(`每页 ${val} 条`)
      this.pageSize = val
      this.getAllBookList()
    },
    handleCurrentChange (val) {
      console.log(`当前页: ${val}`)
      this.currentPage = val - 1
      this.getAllBookList()
    },
    async handleDelete (row) {
      const confirmResult = await this.$confirm(
        '此操作将永久删除图书, 是否继续?',
        '提示',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }
      ).catch(err => err)

      if (confirmResult !== 'confirm') {
        return this.$message.info('已取消删除')
      }
      const { data: res } = await this.$http.delete(
        'http://localhost:8181/book/deleteById/' + row.id
      )
      if (res !== 'success') return this.$message.error('删除图书失败！')
      this.$message.success(`成功删除《${row.name}》 `)
      this.getAllBookList()
    },
    async handleEdit (id) {
      this.EditDialogVisible = true
      const { data: res } = await this.$http.get('http://localhost:8181/book/findById/?id=' + id)
      this.editForm = res
    },
    async commitEdit () {
      this.$refs.editFormRef.validate(async valid => {
        if (!valid) return
        const { data: res } = await this.$http.put('http://localhost:8181/book/update', this.editForm)
        console.log(res)

        if (res !== 'success') return this.$message.error('编辑图书失败！')
        this.getAllBookList()
        return this.$message.success('编辑图书成功！')
      })
      this.EditDialogVisible = false
    }
  }
}
</script>

<style>
</style>
